<template>
	<view :class="[primarySize()]">
		
		<view class="foot_btn flex-box">
			<button hover-class="none" class="btn3 cancel"
				@click="bindToggleCheckAll">{{searchList.length===checkedIndexes.length?'取消全选':'全选'}}</button>
			<button @click="bindSubmit" hover-class="none" class="btn3"
				:class="[checkedIndexes.length===0?'disabled':'']">屏蔽所选公司（{{checkedIndexes.length}}个）</button>
		</view>
		<view class="container bg-white">
			<view class="search_fix">
				<view class="search_con flex-box">
					<input type="text" placeholder="输入搜索的内容..." auto-focus v-model="value" @blur="inpshow" @input="inpvalue"
						placeholder-class="col9" class="fs28 col3 text-input flex-grow-1"></input>
					<image src="@/static/public/icon_search.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="fs36 col0 fd">通过以下方式搜索公司</view>
			<view class="fs30 col3 ptb10">
				<view>公司全称：如“上海西陆信息科技有限公司”</view>
				<view class="pt10">公司简称：如“西陆科技”</view>
			</view>
			<view class="fs24 col9" v-if="!value && !loading">请输入关键词查询</view>
			<view class="fs24 col9" v-if="value & !loading">与“{{value}}”有关的公司，共1个</view>
			<view v-for="(item,index) in searchList" class="flex-box check_item" @click="check(index)">
				<image :src="iconPath(inArray(index, checkedIndexes)?'choose_sc.png':'choose_uc.png')" mode="aspectFit">
				</image>
				<view class="flex-grow-1 fs30 col3">{{item.company_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				searchTimer: 0,
				nav: 0,
				show: false,
				searchList: [],
				checkedIndexes: [],
				value: '', //search word,
				addedList: [], //已经添加到黑名单的公司列表
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function(options) {
			let page = this;

		},
		onUnload() {
			this.getOpenerEventChannel().emit('dataTransfer', {
				addedList: this.addedList
			});
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		methods: {
			check(e) {
				let index = e;
				let findIndex = this.checkedIndexes.indexOf(index);
				if (findIndex === -1) {
					this.checkedIndexes.push(index);
				} else {
					this.checkedIndexes.splice(findIndex, 1);
				}

			},
			inpvalue(e) {
				let value = e.detail.value.trim();
				this.value = value
				if (value) {
					clearTimeout(this.searchTimer);
					this.searchTimer = setTimeout(this.goSearch, 500);
					this.loading = true
				}
			},
			inpshow(e) {
				this.show = !this.show
			},
			bindToggleCheckAll() {
				if (this.searchList.length === 0) {
					return;
				}
				if (this.checkedIndexes.length === this.searchList.length) {
					//取消全选
					this.checkedIndexes = [];
				} else {
					//全选
					let indexes = [];
					this.searchList.forEach((item, index) => indexes.push(index));
					this.checkedIndexes = indexes;
				}
			},
			goSearch() {
				this.$core.get({
					url: "xilujob.company/search_company",
					loading: false,
					data: {
						q: this.value
					},
					success: ret => {
						this.searchList = ret.data
						this.loading = false
						this.checkedIndexes = []

					}
				})
			},
			bindSubmit() {
				if (this.checkedIndexes.length === 0) {
					return;
				}
				let ids = [];
				this.checkedIndexes.forEach(item => {
					ids.push(this.searchList[item].id);
				});
				this.$core.post({
					url: 'xilujob.company/set_blacklist_company',
					data: {
						company_ids: ids
					},
					success: ret => {
						let remainList = [];
						this.searchList.forEach((item, index) => {
							if (this.checkedIndexes.indexOf(index) === -1) {
								remainList.push(item);
							} else {
								this.addedList.push(item);
							}
						});
						this.searchList = remainList
						this.checkedIndexes = []

					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn3 {
		font-size: 32rpx;
		color: #fff;
		background-color:var(--primary);
		width: 100%;
		line-height: 95rpx;
		height: 95rpx;
	}

	.search_nav {
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		font-weight: bold
	}

	.search_nav view text {
		display: inline-block;
		padding-bottom: 7rpx
	}

	.search_nav view.active text {
		border-bottom: 7rpx solid var(--primary);
		padding-bottom: 0
	}

	.search_fix.t100 {
		top: 100rpx;
	}

	.pt80 {
		padding-top: 80rpx;
	}

	.search_fix input {
		height: 100rpx;
	}


	.container {
		padding-top: 155rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.search_answer {
		line-height: 100rpx;
		font-size: 24rpx;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0
	}

	.search_answer:nth-last-child(1) {
		border-bottom: 0
	}


	.search_con {
		background-color: #F7F7F7;
		box-shadow: none;
	}

	.check_item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ebebeb
	}

	.check_item image {
		width: 31rpx;
		height: 31rpx;
		margin-right: 13rpx;
		display: block
	}

	.page-foot {
		border-top: 1rpx solid #ebebeb;
		padding: 10rpx 15rpx;
	}

	.text-input {
		
		height: 80rpx;
	}

	.foot_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		background-color: #fff;
		z-index: 2;
	}

	.container {
		padding-bottom: 140rpx;
	}

	.btn3 {
		border-radius: 8rpx;
	}

	.btn3.cancel {
		border: 1rpx solid var(--primary);
		color: var(--primary);
		background: none;
		width: 223rpx;
		margin-right: 30rpx;
	}

	/* 搜索框 */
	.search_main {
		background-color: #fff;
		position: relative;
		z-index: 31
	}

	.search_fix {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		z-index: 31
	}

	.search_con {
		border-radius: 85rpx;
		line-height: 85rpx;
		position: relative;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-right: 40rpx;
		z-index: 30;
		padding-left: 30rpx;
	}

	.search_con image {
		width: 28rpx;
		height: 29rpx;
	}
</style>